import React from "react";
import { Modal, Tabs } from "antd";
import { observer, inject } from "mobx-react";
import SingleForm from "./SingleForm";
import BatchUpload from "./BatchUpload/index";
import "./style.scss";

const { TabPane } = Tabs;

@inject("AddModalStore")
@observer
class AddAPPOrPeopleModal extends React.Component {
    onOk = () => {
        this.formRef.validateFields((err, values) => {
            if (err) {
                return;
            }

            console.log("Received values of form: ", values);
            this.formRef.resetFields();
            this.props.AddModalStore.submit(this.props.onCancel);
        });
    };

    onCancel = () => {
        this.props.AddModalStore.changeVisible(false);
    };

    handleChangeTab = e => {
        this.props.AddModalStore.changeTab(e);
    };

    saveFormRef = ref => {
        this.formRef = ref;
    };

    render() {
        const {
            AddModalStore: { activeTabKey, type, visible }
        } = this.props;

        return (
            <Modal
                visible={visible}
                title=""
                className="dayu-dialog"
                cancelText="取消"
                okText="确认"
                onOk={this.onOk}
                onCancel={this.onCancel}
            >
                <div className="PMW-add">
                    <Tabs
                        defaultActiveKey="single"
                        activeKey={activeTabKey}
                        className="PMW-add-tab"
                        onChange={this.handleChangeTab}
                    >
                        <TabPane tab={`添加${type}`} key="single">
                            <SingleForm ref={this.saveFormRef} />
                        </TabPane>
                        <TabPane tab="批量添加" key="batch">
                            <BatchUpload />
                        </TabPane>
                    </Tabs>
                </div>
            </Modal>
        );
    }
}

export default AddAPPOrPeopleModal;
